<template>
  <div class="route_all">

    <div class="route_left">
      <div class="route_left_title">
        <div class="route_left_title_img"></div>
        <div class="route_left_title_text">控制台</div>
      </div>

      <div v-for="item in data" :key="item.id" class="route_item" @click="handle_routeTeam(item)"
        :class="ActiveId == item.id ? 'active' : ''">
        <div class="route_item_img"></div>
        <div class="route_item_routeTeam">{{ item.name }}</div>
      </div>

      <div class="route_left_title_addBtn" @click="addConsoleDialog(true)">
        <el-link type="primary">新增控制台</el-link>
      </div>
    </div>

    <div class="route_main">
      <div class="route_main_header">
        <div class="route_main_header_allBtn">
          <el-link type="primary" @click="routeAll">进入全局模式看板</el-link>
        </div>

        <div class="route_main_header_routeBtn" @click="addConsoleDialog(false)">
          <div class="route_main_header_routeBtn_img"></div>
          <div class="route_main_header_routeBtn_text">管理线路</div>
        </div>
      </div>
      <div class="route_main_center" v-loading="loading">
        <GridRoute v-for="item in grid_data.routeList" :key="item" :routeData="item" @detailBtn="detailBtn(item)" />
      </div>
    </div>

    <el-dialog v-model="dialog_visible" width="32%" title="控制台管理" :before-close="handleClose">
      <el-form :model="dialog_form" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="控制台名称" prop="name">
              <el-input v-model="dialog_form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-transfer v-model="transferValue" :data="selectRouteList" filterable :props="{ key: 'id', label: 'name' }"
        :titles="['线路清单', '已选清单']" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog_visible = false">取消</el-button>
          <el-button type="primary" @click="submitConsole()">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getConsoleList, getConsoleDetail, addConsole, putConsole, delConsole, getConsoleRouteList } from '@/api/dispatch/console.js'
import GridRoute from './components/grid/index'

const router = useRouter();
const dialog_visible = ref(false)

const dialog_form = ref({})
const rules = {
  name: [{ required: true, message: '控制台名称必填', trigger: 'blur' }]
}
const loading = ref(true)
const isAdd = ref(false)

const transferValue = ref([])
const data = ref([])
const addConsoleDialog = (boolean) => {
  isAdd.value = boolean
  dialog_visible.value = true
  if (!isAdd.value) {
    dialog_form.value.name = grid_data.value.name
    transferValue.value = []
    grid_data.value.routeList.forEach(item => {
      transferValue.value.push(item.routeId)
    })
  }
}


const generateData = async () => {
  const res = await getConsoleList()
  if (res.code !== 200) return
  data.value = res.data
  if (res.data) {
    handle_routeTeam(res.data[0])
  } else {
    loading.value = false
  }
}
generateData()
const selectRouteList = ref([])
const getSelectRouteList = async () => {
  const res = await getConsoleRouteList()
  selectRouteList.value = res.data
}
getSelectRouteList()

const handleClose = () => {
  dialog_visible.value = false
  dialog_form.value = {}
}

const deleteConsole = async () => {
  const ids = []
  await delConsole(ids)
}
const submitConsole = async () => {
  const data = {
    name: dialog_form.value.name,
    routeId: transferValue.value.join(',')
  }
  if (isAdd.value) {
    await addConsole(data)
  } else {
    data.id = grid_data.value.id
    await putConsole(data)
  }
  dialog_visible.value = false
  const resConsole = await getConsoleList()
  data.value = resConsole.data
  const res = await getConsoleDetail(ActiveId.value)
  grid_data.value = res.data
}

const detailBtn = (item) => {

  router.push({ path: 'detail', query: { routeId: item.routeId, routeName: item.routeName, routeAllData: JSON.stringify(grid_data.value) } })
  // 
  // 

}
const routeAll = () => {
  router.push({ path: 'routeAll', })

  // query: { routeAllData: JSON.stringify(grid_data.value) } 
}
const ActiveId = ref(1)
const grid_data = ref([])

const handle_routeTeam = async (data) => {
  loading.value = true
  ActiveId.value = data.id
  const res = await getConsoleDetail(data.id)
  loading.value = false
  grid_data.value = res.data
}



</script>

<style lang="scss" scoped>
@mixin bg-color {
  background-color: #091940;
}

.route_all {
  display: flex;
  width: 100%;
  height: 100%;
  @include bg-color;

  .route_left {
    width: 200px;
    height: 100%;
    overflow-y: auto;
    max-height: 830px;
    background: #F2F5FA;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-right: 2px solid #1C2F61;
    @include bg-color;
    position: relative;

    .route_left_title {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      cursor: default;
      height: 56px;
      padding: 18px;
      border-bottom: 1px solid #1C2F61;

      .route_left_title_img {
        height: 14px;
        width: 14px;
        background: url('./assets/img/config.png') no-repeat;
        background-size: contain;
        margin-right: 12px;
      }

      .route_left_title_text {
        color: #fff;
        font-size: 14px;
      }
    }

    .route_item {
      display: flex;
      justify-content: start;
      align-items: center;
      height: 50px;
      padding-left: 50px;
      cursor: pointer;
      color: #fff;
      border-bottom: 1px solid #1C2F61;
      font-size: 14px;

      &:hover {
        color: #668FF5;
        font-size: 14px;
      }

      .route_item_img {
        height: 14px;
        width: 14px;
        background: url('./assets/img/route.png') no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
    }

    .route_left_title_addBtn {
      position: absolute;
      bottom: 26px;
      left: 30px;
      width: 140px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      background: #11224B;
      border: 1px solid #668FF5;
      border-radius: 15px;
      cursor: pointer;

      .el-link {
        color: #fff
      }
    }

    .active {
      color: #668FF5;
    }
  }

  .route_main {
    flex: 1;

    .route_main_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 46px;
      padding: 0px 20px;
      background: #091940;
      border-bottom: 2px solid #1C2F61;

      .route_main_header_allBtn {
        width: 170px;
        height: 30px;
        background: url('./assets/img/bg-img.png');
        text-align: center;
        line-height: 28px;

        .el-link {
          color: #FEFEFE;
          font-size: 14px;

          &:hover {
            color: #091940
          }
        }
      }

      .route_main_header_routeBtn {
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;

        .route_main_header_routeBtn_img {
          height: 16px;
          width: 16px;
          background: url('./assets/img/utils-2.png') no-repeat;
          background-size: contain;
          margin-right: 10px;
        }

        .route_main_header_routeBtn_text {
          color: #668FF5
        }
      }
    }

    .route_main_center {
      overflow-y: auto;
      max-height: 780px;
      display: flex;
      flex-wrap: wrap;
      padding: 15px 20px;
    }
  }

  :deep .el-dialog {
    // background-color: #091940;
    width: 640px;
    border: 1px solid #2E488A;
    box-shadow: 0px 0px 10px 0px rgba(102, 143, 245, 0.2);
    border-radius: 10px;
    color: #fff;
  }
}

:deep(.el-link) {
  font-size: 15px !important;
}
</style>